import React, { useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import TitleText from '../TitleText';
import { Image } from 'components/atoms';
import { Swiper, SwiperSlide } from 'swiper/react';
import Autoplay from '../Autoplay';
import Navigation from '../Navigation';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
    PopularAlbumsRoot: {
        width: '100%',
        height: '100%',
        zIndex: 'auto',
        position: "relative",
        overflow: "hidden",
        marginBottom: "50px",
        "& .swiper-image": {
            width: "90%",
            height: "300px",
            transition: ".5s",
            position: "relative",
            [theme.breakpoints.up('md')]: {
                height: "300px",
            },
        },
        "& .swiper-button": {
            position: 'absolute',
            bottom: '5%',
            left: '0',
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            opacity: 0,
            transition: ".8s",
            textTransform: "uppercase",
            "& .swiper-button-left": {
                width: "40%",
                background: "#7E53F9",
                padding: "10px 5px",
                marginRight: "5px",
                textAlign: "center",
                "& a": {
                    color: "#fff",
                }
            },
            "& .swiper-button-right": {
                width: "40%",
                padding: "10px 5px",
                background: "#fff",
                marginLeft: "5px",
                textAlign: "center",
                cursor:"pointer",
                "& a": {
                    color: "#000",
                }
            },
        },
        "& .swiper-slide-active": {
            height: "400px",
            paddingBottom: 0,
            transition: ".5s",
            [theme.breakpoints.up('md')]: {
                height: "500px",
            },
            "& .swiper-image": {
                transition: ".5s",
                height: "300px",
                [theme.breakpoints.up('md')]: {
                    height: "400px",
                },
            },
            "& .swiper-button": {
                opacity: 1,
                transition: ".8s",
            }
        },
        '& .swiper-button-prev, & .swiper-button-next': {
            width: "36px",
            height: "36px",
            borderRadius: '100%',
            position: 'absolute',
            zIndex: 1000,
            background: theme.palette.primary.main,
            boxShadow: `0 2px 10px 0 ${theme.palette.cardShadow}`,
            border: `2px solid ${theme.palette.background.paper}`,
            '&:after': {
                fontSize: 'initial',
                color: theme.palette.background.paper,
            },
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        },
        '& .swiper-button-prev': {
            left: "-250px",
            right: 0,
            top: 0,
            bottom: "180px",
            margin: "auto",
            [theme.breakpoints.up('md')]: {
                bottom: "80px",
            },
        },
        '& .swiper-button-next': {
            right: "-250px",
            left: 0,
            top: 0,
            bottom: "180px",
            margin: "auto",
            [theme.breakpoints.up('md')]: {
                bottom: "80px",
            },
        },
    },
    swiperSlide: {
        width: 'auto',
        height: "400px",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        transition: ".5s",
        [theme.breakpoints.up('sm')]: {
        },
        [theme.breakpoints.up('md')]: {
            height: "500px",
        },
    },
    image: {
        objectFit: 'cover',
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "20px",
        fontStyle: "normal",
        fontWeight: 400,
        lineHeight: "30px",
        textTransform: "uppercase",
        color: "#000",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
        },
    },
    typography1: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "16px",
        fontStyle: "normal",
        fontWeight: 400,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#4F4F4F",
        [theme.breakpoints.up('md')]: {
            fontSize: "18px",
        },
    },
    swiperButton: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        [theme.breakpoints.up('md')]: {
            display: "none"
        },
        "& div": {
            width: "50%",
            color: "#000",
            padding: "15px",
            textAlign: "center",
            border: "1px solid #9B9B9B",
            marginTop: "20px",
            fontSize: "14px",
            [theme.breakpoints.up('md')]: {
                width: "30%",
            },
        },
    },
    icon: {
        padding: "8px 12px",
    },
    viewAll: {
        padding: "50px 0",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        [theme.breakpoints.up('md')]: {
            padding: "80px 0",
        },
    },
    button: {
        color: "#000",
        fontSize: "12px",
        padding: "12px 40px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        cursor: "pointer",
        fontWeight: 700,
        [theme.breakpoints.up('md')]: {
            padding: "12px 50px",
            fontSize: "10px",
        },
    },
}));

const PopularAlbums = (props) => {
    const classes = useStyles();
    const PopularAlbumsData = useSelector((state) => state.cover.discovers?.top_albums);
    const token = localStorage.getItem('token');
    const history = useHistory();

    useEffect(() => {
        let prev = document.querySelector(".swiper-button-prev")
        let next = document.querySelector(".swiper-button-next")
        if (prev && next) {
            prev.innerHTML = `<div style="">
            <i class="fa fa-chevron-left" style="color: #fff" />
        </div>`
            next.innerHTML = `<div style="">
            <i class="fa fa-chevron-right" style="color: #fff" />
        </div>`
        }
    }, [])

    const moveLink = (item) =>{
        console.log(item)
        history.push("account/artist_profile",item)
    }

    return (
        <div className={classes.PopularAlbumsRoot}>
            <TitleText text={"Popular Albums"} />

            <Swiper
                slidesPerView={'auto'}
                spaceBetween={0}
                loop={true}
                autoplay={{
                    delay: 5000,
                    disableOnInteraction: false,
                }}
                centeredSlides={true}
                breakpoints={{
                    320: {
                        slidesPerView: 1.5,
                    },
                    990: {
                        slidesPerView: 2,
                    },
                    1350: {
                        slidesPerView: 4,
                    }
                }}
                navigation={true}
                modules={[Autoplay, Navigation]}
            >
                {PopularAlbumsData && PopularAlbumsData.map((item, index) => (
                    <SwiperSlide
                        className={clsx(
                            'swiper-image__slide',
                            'swiper-slide',
                            classes.swiperSlide,
                        )}
                        key={index}
                    >
                        <div className={"swiper-image"}>
                            <Image
                                src={item.photoURL}
                                alt={item.photoURL}
                                srcSet={item.photoURL}
                                lazyProps={{ width: '100%', height: '100%' }}
                                className={clsx(
                                    'swiper-image__item',
                                    classes.image,
                                )}
                            />
                            <div className={"swiper-button"}>
                                <div className={"swiper-button-left"}    
                                    >
                                    <a href={process.env.REACT_APP_SERVER_URL+'player/'+item.album_link+'/'+token} 
                                  
                                    >
                                        listen to album
                                    </a>
                                </div>
                                <div className={"swiper-button-right"} onClick={()=>moveLink(item)}>
                                        artist profile
                                </div>
                            </div>
                        </div>

                        <Typography className={classes.typography1}>
                            {item.title}
                        </Typography>
                        <Typography className={classes.typography}>
                            {item.sub_title}
                        </Typography>
                    </SwiperSlide>
                ))}
            </Swiper>

            <div className={classes.viewAll}>
                <div className={classes.button} onClick={() => history.push("/discover/all",3)}>VIEW ALL</div>
            </div>
        </div >
    )
}


PopularAlbums.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default PopularAlbums
